<template>
  <div class="movieDetail">
    <HeadTop head-title="电影详情" go-back="true"/>
    <div class="basicInfo">
      <div class="basicInfoLeft">
        <img class="cover" src="../assets/img/moviecover.png" title="电影封面">
      </div>
      <div class="basicInfoRight">
        <h2 class="movietitle">花束般的恋爱花束みた いな恋をした(2021)</h2>
        <p class="minCateRegion">124 分钟 / 爱情 / 日本</p>
        <div class="likes">
          <div class="likenum">
            <img src="../assets/img/like.png"> <span>109</span>
          </div>
          <div class="ratenum">10 人评分</div>
        </div>
        <p class="ratings">
          <span class="shangyingrate">上影评分 9.0</span>
          <span class="doubanrate">豆瓣评分 8.6</span>
        </p>
        <p class="thirdpart">
          <span>第三方平台</span>
          <span>BT</span>
          <img src="../assets/img/to.png">
        </p>
      </div>
    </div>
    <!-- tab + 锚点 -->
    <div class="switchTabs">
      <div class="tab" @click="goAnchor('introduce')"><span class="padbot active">简介</span></div>
      <div class="tab" @click="goAnchor('recommend')"><span class="padbot">推荐</span></div>
      <div class="tab" @click="goAnchor('review')"><span class="padbot">影评</span></div>
    </div>
    <div class="mainContent">
      <!-- 简介模块 -->
      <div class="briefIntroduce" ref="introduce">
        <p :class="{ fold: isIntroFold }">山音麦 (菅田将晖 饰) 和八谷绢 (有村架纯 饰) 因错过尾班车而相遇，在深夜咖啡馆聊起文学、电影和音乐，喜好竟奇蹟地相似，二人瞬间坠入爱河。他们毕业后开始一边兼职工作，一边开始同居生活，更一起养拾回来的街猫，最大的目标就是维持俩口子的日常。 但时日流逝，不想改变也得改变。他失约于《牯岭街》， 她独赏郭利斯马基黑色幽默。五年盛放，世上唯一的花未必结果，爱情若只如初见。《垫底辣妹》《借着雨点说爱你》导演土井裕泰联同《东京爱的故事》神级编剧坂元裕二，强调真实生活感的浪漫，菅田将晖和有村架纯衬到绝合演，谱出这代最揪心的爱的故事。</p>
        <span class="foldtext" @click="changeIntroFold">{{ isIntroFold ? '展开' : '收起' }}</span>
      </div>
      <!-- cast模块 -->
      <div class="mainCast">
        <div class="sectionTitle">
          <div class="title">演职员</div>
          <div class="more">全部 29 <img src="../assets/img/arrow.png"></div>
        </div>
        <div class="castList">
          <template v-for="actor in castList" >
            <div class="actor" :key="actor.id">
              <img :src="actor.picUrl">
              <span class="actorName">{{ actor.name }}</span>
              <span class="charactor">{{ actor.charactor }}</span>
            </div>
          </template>
        </div>
      </div>
      <!-- 推荐模块 -->
      <div class="shangyingrecommend" ref="recommend">
        <div class="sectionTitle">
          <div class="title">上影推荐</div>
        </div>
        <p :class="{ fold: isRecommendFold }">
          影片最让人赞叹的地方，是将现实境遇只作为宽泛的背景，而没有形塑为因果关系的本源。谁说爱情必然要出轨、堕胎、绝症，爱情里的荡气回
        </p>
        <span class="foldtext" @click="changeRecommendFold">{{ isRecommendFold ? '展开' : '收起' }}</span>
      </div>
      <!-- 视频模块 -->
      <div class="tuimontage">
        <div class="sectionTitle">
          <div class="title">推剪辑</div>
        </div>
        <div class="montageList">
          <template v-for="montage in montageList">
            <div class="montage" :key="montage.id">
              <div>
                <img :src="montage.picUrl">
              </div>
              <p>{{ montage.title }}</p>
            </div>
          </template>
        </div>
      </div>
      <!-- 图集模块 -->
      <div class="tuiPhotos">
        <div class="sectionTitle">
          <div class="title">推图集</div>
          <div class="more"><img src="../assets/img/arrow.png"></div>
        </div>
        <div class="photoList">
          <template v-for="photo in photoList">
            <div class="albumitem" :key="photo.id">
              <div class="album">
                <img :src="photo.picUrl">
              </div> 
              <p>{{ photo.title }}</p>
            </div>
          </template>
        </div>
      </div>
      <!-- 渠道 -->
      <div class="viewChannels">
        <div class="sectionTitle">
          <div class="title">观看渠道</div>
        </div>
        <div class="channels">
          <div class="thirdparts">
            <div class="roundedbox"><p>第三方</p></div>
          </div>
          <div class="bt">
            <div class="roundedbox"><p>BT</p></div>
          </div>
          <div class="nochannel">
            <div class="roundedbox"><p>暂无片源</p></div>
          </div>
        </div>
      </div>
      <!-- 影评 -->
      <div class="movieReview" ref="review">
        <div class="sectionTitle">
          <div class="title">影评 <span class="num">116</span></div>
          <div class="more"><img src="../assets/img/arrow.png"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeadTop from "../components/header/Head.vue"

export default {
  name: 'moviedetail',
  data() {
    return {
      // 简介展开状态
      isIntroFold: true,
      // 推荐展开状态
      isRecommendFold: true,
      castList: [
        {
          id: 1,
          picUrl: require('../assets/img/cast1.png'),
          name: '土井裕泰',
          charactor: '导演'
        },
        {
          id: 2,
          picUrl: require('../assets/img/cast1.png'),
          name: '土井裕泰',
          charactor: '导演'
        },
        {
          id: 3,
          picUrl: require('../assets/img/cast1.png'),
          name: '土井裕泰',
          charactor: '导演'
        },
        {
          id: 4,
          picUrl: require('../assets/img/cast1.png'),
          name: '土井裕泰',
          charactor: '导演'
        },
        {
          id: 5,
          picUrl: require('../assets/img/cast1.png'),
          name: '土井裕泰',
          charactor: '导演'
        }
      ],
      montageList: [
        {
          id: 1,
          picUrl: require('../assets/img/montage1.png'),
          title: '花束般的恋爱：连二次元都打不赢的爱情，为何值得我们相信？'
        },
        {
          id: 2,
          picUrl: require('../assets/img/montage1.png'),
          title: '花束般的恋爱：连二次元都打不赢的爱情，为何值得我们相信？'
        }
      ],
      photoList: [
        {
          id: 1,
          picUrl: require('../assets/img/photolist1.png'),
          title: '一个和百分之百合拍的人说分手 的故事!'
        },
        {
          id: 2,
          picUrl: require('../assets/img/photolist1.png'),
          title: '一个和百分之百合拍的人说分手 的故事!'
        }
      ]
    }
  },
  methods: {
    changeIntroFold() {
      this.isIntroFold = !this.isIntroFold
    },
    changeRecommendFold() {
      this.isRecommendFold = !this.isRecommendFold
    },
    goAnchor(refName) {
      this.$nextTick(() => {
        let scorllTop = this.$refs[refName].offsetTop
        document.documentElement.scrollTop = scorllTop
      })
    }
  },
  components: {
    HeadTop
  }
}
</script>

<style lang="scss" scoped>
img {
  // transform: scale(0.5);
  zoom: 0.5;
}

.basicInfo {
  display: flex;
  flex-direction: row;
  background-color: #fff;
  .basicInfoLeft {
    display: flex;
    justify-content: center;
    align-items: center;
    .cover {
      padding: 30px 40px;
    }
  }
  .basicInfoRight {
    .movietitle {
      letter-spacing: 0.05rem;
      font-weight: bold;
      margin-top: 10px;
      line-height: 1.3;
      font-family: 'Microsoft YaHei';
    }
    .minCateRegion {
      font-size: 12px;
      line-height: 1.5;
    }
    .likes {
      display: flex;
      flex-direction: row;
      gap: 40px;
      padding: 5px 0;
      .likenum {
        display: flex;
        gap: 8px;
        justify-content: center;
      }
    }
    .ratings {
      margin-top: 10px;
      display: flex;
      gap: 30px;
      .doubanrate {
        color: #acacac;
      }
    }
    .thirdpart {
      display: flex;
      margin-top: 10px;
      gap: 30px;
    }
  }
}

.switchTabs {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #f4f4f4;
  background-color: #fff;
  width: 100%;
  .tab {
    padding-top: 20px;
    flex: 1;
    text-align: center;
    .padbot {
      display: inline-block;
      padding-bottom: 10px;
      color: #707070;
    }
    .active {
      border-bottom: 2px solid #434343;
      color: #434343;
    }
  }
}

.mainContent {
  padding: 20px 20px;
  background-color: #fff;
  .briefIntroduce {
    position: relative;
    padding-bottom: 20px;
    border-bottom: 1px solid #f4f4f4;
    p {
      color: #707070;
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 0.05rem;
      font-weight: bold;
      // 展开 收起
    }
  }
  .mainCast {
    padding-bottom: 30px;
    border-bottom: 1px solid #f4f4f4;
    .castList {
      display: flex;
      gap: 20px;
      overflow-x: scroll;
      .actor {
        display: flex;
        flex-direction: column;
        gap: 5px;
        color: #535353;
        .actorName {
          font-size: 13px;
        }
      }
    }
  }
  .shangyingrecommend {
    padding-bottom: 30px;
    border-bottom: 1px solid #f4f4f4;
    p {
      color: #707070;
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 0.05rem;
      font-weight: bold;
    }
  }
  .tuimontage {
    padding-bottom: 20px;
    border-bottom: 1px solid #f4f4f4;
    .montageList {
      p {
        margin: 20px 0;
        color: #707070;
        font-size: 14px;
        line-height: 1.2;
      }
    }
  }
  .tuiPhotos {
    padding-bottom: 30px;
    border-bottom: 1px solid #f4f4f4;
    .photoList {
      display: flex;
      gap: 10px;
      overflow-x: scroll;
      .albumitem {
        display: flex;
        flex-direction: column;
        gap: 5px;
        p {
          font-size: 13px;
        }
      }
    }
  }
  .viewChannels {
    padding-bottom: 30px;
    border-bottom: 1px solid #f4f4f4;
    .channels {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  }

  .fold {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .foldtext {
    float: right;
    clear: both;
    margin-bottom: 20px;
  }
  .roundedbox {
    padding: 1px 0;
    width: 53px;
    text-align: center;
    border: 1px solid #cecece;
    border-radius: 6px;
    p {
      font-weight: 600;
      letter-spacing: 0.02rem;
      transform: scale(0.8);
    }
  }
  .sectionTitle {
    display: flex;
    align-items: flex-end;
    position: relative;
    margin: 20px 0;
    .title {
      font-size: 20px;
      font-weight: 600;
      .num {
        font-size: 16px;
        color: #a0a0a0;
      }
    }
    .more {
      position: absolute;
      right: 0;
    }
  }
}
</style>